<template>
  <el-card>
    <div slot="header">
      <h3>商品单计量单位修改</h3>
    </div>
    <!-- 按钮操作栏 -->
    <BtnRender :render="renderBtnsBar" />
    <BasicTable
      showActionCol
      :showSelectCol="false"
      :showPagination="false"
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :tableHeight="480"
      :actionRender="renderTableBtnAction"
    />
    <GoodsLinkedDialog
      ref="goodsLinked"
      :visible.sync="dialogVisible"
      :queryTableData="queryLinkGoodsTableData"
      @getLinkedGoods="getTableDataByGoodsLinked"
    />
  </el-card>
</template>
<script>
import BtnRender from '@/components/JSXRender/BtnRender';
import BasicTable from '@/components/BasicTable';
import GoodsLinkedDialog from '@/pages/commodity/components/UnitsLinkGoodsDialog';
import { getBtnsBar, getTableAction } from '@/utils/getBtnsRender';
import { TABLE_COLUMNS } from './constants/singleEdit';
import {
  getSingleUnitLinkGoodsListService,
  getSingleSkuUnitListService,
  submitSingleSkuUnitsService
} from '@/api/commodity/commodityManage/unitsManage';
export default {
  components: {
    BtnRender,
    BasicTable,
    GoodsLinkedDialog
  },
  data () {
    return {
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      btnLoading: {
        submit: false
      },
      dialogVisible: false
    }
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const size = 'large'; // 按钮尺寸
      const btnsBar = [
        { label: '关联商品', method: this.handleLinkGoods, size },
        {
          label: '提交',
          method: this.handleSubmit,
          loading: this.btnLoading.submit,
          size
        },
        { label: '返回', method: this.handleGoBack, size }
      ];
      return getBtnsBar(h, btnsBar, 'end');
    },
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      const actionList = [
        { label: '删除', method: this.handleDelete },
      ];
      return getTableAction({ h, row, actionList });
    },
    // 关联商品
    handleLinkGoods () {
      this.dialogVisible = true;
    },
    // 提交
    handleSubmit () {
      const isNullTable = this.tableInfo.list.length === 0
      if (isNullTable) { return this.$message.warning('请关联商品后再提交'); }
      this.submitUnitsData();
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'unitsManageList' });
    },
    // 删除
    handleDelete (row) {
      this.tableInfo.list = this.tableInfo.list.filter(item => item.skuNo !== row.skuNo);
      this.$refs.goodsLinked.GoodsLink.delete(row);
    },
    // 查询关联商品弹框表格数据
    async queryLinkGoodsTableData (formData, { nowPage, pageSize }, loadingFn) {
      const data = { ...formData, nowPage, pageSize };
      const retData = await getSingleUnitLinkGoodsListService(data, loadingFn);
      return retData;
    },
    // 获取表格数据 by 关联商品
    async getTableDataByGoodsLinked (linkedGoods) {
      if (!linkedGoods) {
        this.tableInfo.list = [];
        return false;
      }
      const skuNos = linkedGoods.map(item => item.skuNo);
      const retData = await getSingleSkuUnitListService(
        { skuNos },
        state => { this.tableInfo.loading = state; }
      );
      if (retData) {
        this.tableInfo.list = retData;
      }
    },
    // 提交计量单位数据
    async submitUnitsData () {
      const data = { skuUnitList: this.tableInfo.list.map(item => ({ skuNo: item.skuNo, unitDecimals: item.unitDecimals })) }
      const retStatus = await submitSingleSkuUnitsService(
        data,
        state => { this.btnLoading.submit = state; }
      );
      if (retStatus) {
        this.$message.success('提交成功');
        this.handleGoBack();
      }
    }
  }
}
</script>
